<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- <script src="js/bootstrap.min.js" type="text/javascript"></script> -->
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

.container .row div {
	/* position:relative;
				 float:left; */
	
}

font {
	color: #3164af;
	font-size: 18px;
	font-weight: normal;
	padding: 0 10px;
}
</style>


<style type="text/css">
.input-val {
	width: 160px;
	background: #ffffff;
	height: 3.8rem;
	padding: 0 5%;
	border-radius: 5px;
	border: none;
	border: 1px solid rgba(0, 0, 0, .2);
	font-size: 1.0625rem;
}

#canvas {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
}
</style>
</head>
<body>
	<!--
      	时间：2015-12-30
      	描述：菜单栏
      -->
	<div class="container-fluid">
		<div class="col-md-4">
			<img src="img/logo2.png" />
		</div>
		<div class="col-md-5">
			<img src="img/header.png" />
		</div>
		<div class="col-md-3" style="padding-top: 20px">
			<ol class="list-inline">
				<li><a href="login.jsp">未登录，请登录</a></li>
				<li><a href="register.jsp">注册</a></li>
			</ol>
		</div>
	</div>


	<div class="container"
		style="width: 100%; background: url('image/regist_bg.jpg');">
		<div class="row">

			<div class="col-md-2"></div>

			<div class="col-md-8"
				style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
				<font>会员注册</font>USER REGISTER

				<form class="form-horizontal" style="margin-top: 5px;">
					<!-- action="registerServlet" method="post" -->
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-6">
							<input type="text" name="username" class="form-control"
								id="username" placeholder="请输入用户名">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-6">
							<input type="password" name="password" class="form-control"
								id="inputPassword3" placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group">
						<label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="confirmpwd"
								placeholder="请输入确认密码">
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-6">
							<input type="email" name="email" class="form-control"
								id="inputEmail3" placeholder="Email">
						</div>
					</div>
					<div class="form-group">
						<label for="usercaption" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-6">
							<input type="text" name="name" class="form-control"
								id="usercaption" placeholder="请输入姓名">
						</div>
					</div>
					<div class="form-group opt">
						<label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-6">
							<label class="radio-inline"> <input type="radio"
								name="sex" id="inlineRadio1" value="男"> <span>男</span>
							</label> <label class="radio-inline"> <input type="radio"
								name="sex" id="inlineRadio2" value="女"> <span>女</span>
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">出生日期</label>
						<div class="col-sm-6">
							<input name="birthday" type="text" class="form-control">
						</div>
					</div>


					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">验证码</label>
						<div class="col-sm-3">
							<input type="text" value="" placeholder="请输入验证码（不区分大小写）"
								class="input-val">
						</div>
						<div class="col-sm-2">
							<!-- <img src="./image/captcha.jhtml"/> -->
							<canvas id="canvas" width="100" height="43"></canvas>
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<!-- <input type="submit"  width="100" value="注册" name="submit"
				    style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				    height:35px;width:100px;color:white;"> -->

							<input type="submit" value="注册" class="btn"
								style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
						</div>
					</div>
				</form>
			</div>


			<script type="text/javascript">
				$(function() {
					var show_num = [];
					draw(show_num);

					$("#canvas").on('click', function() {
						draw(show_num);
					})
					
					$(".btn").on('click', function() {
						var val = $(".input-val").val().toLowerCase();
						var num = show_num.join("");
						if (val == '') {
							alert('请输入验证码！');
						} else if (val == num) {
							alert('验证成功！'+val);							
							/* 验证码验证成功则跳转 */
							var username = $("[name=username]").val();
							var password = $("[name=password]").val();
							var email = $("[name=email]").val();
							var name = $("[name=name]").val();
							var sex = $('input[type=radio][name=sex]:checked').val()
							var birthday = $("[name=birthday]").val();
							alert("checkAccount"+username+ password+ email+ name+sex+birthday);
							$.ajax({
								url : "registerServlet",
								method : "POST",
								data : {
									"username" : username,
									"password" : password,
									"email" : email,
									"name" : name,
									"sex" : sex,
									"birthday" : birthday
								},
								dataType : "html",
							}).done(function(page){
								alert(page),
								location.href = page
								/* window.location = page */
							})								
						} else {
							alert('验证码错误！请重新输入！');
							$(".input-val").val('');
							draw(show_num);
						}
					})
				})
					
					 	

			function draw(show_num) {
				var canvas_width=$('#canvas').width();
				var canvas_height=$('#canvas').height();
				var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
				var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
				var aCode = sCode.split(",");
				var aLength = aCode.length;//获取到数组的长度
				
				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
					var deg = Math.random() * 30 * Math.PI / 180; /*//产生0~30之间的随机弧度 */
					var txt = aCode[j];//得到随机的一个内容
					show_num[i] = txt.toLowerCase();
					var x = 10 + i * 20;//文字在canvas上的x坐标
					var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
					context.font = "bold 23px 微软雅黑";
			
					context.translate(x, y);
					context.rotate(deg);
			
					context.fillStyle = randomColor();
					context.fillText(txt, 0, 0);
			
					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) { //验证码上显示线条
					context.strokeStyle = randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) { //验证码上显示小点
					context.strokeStyle = randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			}
			
			function randomColor() {//得到随机的颜色值
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}
		</script>

			<div class="col-md-2"></div>

		</div>
	</div>



	<div style="margin-top: 50px;">
		<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势"
			title="我们的优势" />
	</div>

	<div style="text-align: center; margin-top: 5px;">
		<ul class="list-inline">
			<li><a>关于我们</a></li>
			<li><a>联系我们</a></li>
			<li><a>招贤纳士</a></li>
			<li><a>法律声明</a></li>
			<li><a>友情链接</a></li>
			<li><a target="_blank">支付方式</a></li>
			<li><a target="_blank">配送方式</a></li>
			<li><a>服务声明</a></li>
			<li><a>广告声明</a></li>
		</ul>
	</div>
	<div style="text-align: center; margin-top: 5px; margin-bottom: 20px;">
		Copyright &copy; 2018-2025 睿峰商城 版权所有</div>

</body>
</html>